<style>
    .mass-wrap {
        height: 100%;
    }

    .mass-chose {
        border: 1px dashed #e7e7eb;
        text-align: center;
        height: 100%;
        line-height: 220px;
    }

    .mass-chose .mass {
        display: inline-block;
        padding: 20px;
        line-height: 1;
        border: 1px solid #e7e7eb;
        color: #333;
        margin-right: 20px;
    }

    .mass-chose .mass:last-child {
        margin-right: 0;
    }

    .mass-chose .mass:hover {
        background: #f4f6f9;
        color: #428bca;
    }

    .mass-chose .iconfont {
        margin-right: 10px;
    }

    .mass-show {
        height: 100%;
    }

    .media-list .item {
        border: 1px solid #ccc;
    }

    .mass-show .wxmp-list-justify .item {
        border: 1px solid #ccc;
        height: 250px;
    }

    .mass-show .layui-btn-danger {
        position: absolute;
        bottom: 10px;
        left: 50%;
    }

    .icon-show-wrap {
        padding: 20px;
    }

    .icon-show-wrap p {
        margin-top: 20px;
    }

    .icon-show-block {
        display: inline-block;
        width: 80px;
        height: 80px;
        text-align: center;
        line-height: 80px;
        font-size: 40px;
        border: 1px solid #dedede;
    }

    .checked.icon-right-1 {
        display: none;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-align: center;
        line-height: 250px;
        background: rgba(0, 0, 0, .6);
        color: #fff;
        font-size: 100px;
    }

    li.active .checked.icon-right-1 {
        display: block;
    }

    .wxmp-list-image .checked.icon-right-1 {
        line-height: 170px;
    }
</style>
<link rel="stylesheet" href="/js/plugin/jquery-tagsinput/jquery.tagsinput.min.css">
<div class="sm-rightPanel">
    <div class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label"><i>*</i>规则名</label>
            <div class="layui-input-block">
                <input id="keywordName" name="name" type="text" style="width: 30%;" class="layui-input" value=""/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i>*</i>关键字</label>
            <div class="layui-input-block">
                <input id="keywords" name="keywords" type="text" class="tags" value=""/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i>*</i>回复资源</label>
            <div class="layui-input-block">
                <div class="layui-tab" lay-filter="mass">
                    <ul class="layui-tab-title">
                        <li class="layui-this" data-type='news'>图文</li>
                        <li data-type='image'>图片</li>
                        <li data-type='voice'>音频</li>
                        <li data-type='video'>视频</li>
                        <li data-type='text'>文本</li>
                    </ul>
                    <div id="mass_content" class="layui-tab-content"
                         style="border: 1px solid #dedede;height: 260px;position: relative;top:-1px;padding: 20px;">
                        <!--图文-->
                        <div class="layui-tab-item mass-wrap layui-show" id="item_tuwen">
                            <div class="mass-chose">
                                <a class="mass" href="javascript:void(0);" data-chose="single">
                                    <i class="iconfont icon-doc"></i>选择单图文
                                </a>
                                <a class="mass" href="javascript:void(0);" data-chose="multiple">
                                    <i class="iconfont icon-doc"></i>选择多图文
                                </a>
                                <a class="mass" href="/views/index.html#/wx/material/document/addsingle">
                                    <i class="iconfont icon-doc"></i>新建单图文
                                </a>
                                <a class="mass" href="/views/index.html#/wx/material/document/addmultiple">
                                    <i class="iconfont icon-doc"></i>新建多图文
                                </a>
                            </div>
                            <div class="mass-show" style="display: none;">
                                <ul class="wxmp-list-justify media-list">
                                </ul>
                                <button class="layui-btn layui-btn-danger">
                                    <i class="iconfont icon-delete"></i>删除
                                </button>
                            </div>
                        </div>
                        <!--图片-->
                        <div class="layui-tab-item mass-wrap" id="item_image">
                            <div class="mass-chose">
                                <a class="mass" href="javascript:void(0);" data-chose="image">
                                    <i class="iconfont icon-doc"></i>选择图片
                                </a>
                                <a class="mass" href="/views/index.html#/wx/material/image/image">
                                    <i class="iconfont icon-doc"></i>新建图片
                                </a>
                            </div>
                            <div class="mass-show" style="display: none;">
                                <ul class="wxmp-list-image">
                                </ul>
                                <button class="layui-btn layui-btn-danger">
                                    <i class="iconfont icon-delete"></i>删除
                                </button>
                            </div>
                        </div>
                        <!--音频-->
                        <div class="layui-tab-item mass-wrap" id="item_audio">
                            <div class="mass-chose">
                                <a class="mass" href="javascript:void(0);" data-chose="voice">
                                    <i class="iconfont icon-doc"></i>选择音频
                                </a>
                                <a class="mass" href="/views/index.html#/wx/material/audio/audio">
                                    <i class="iconfont icon-doc"></i>新建音频
                                </a>
                            </div>
                            <div class="mass-show" style="display: none;">
                                <div class="icon-show-wrap">
                                    <i class="iconfont icon-fileaudio icon-show-block"></i>
                                    <p></p>
                                </div>
                                <button class="layui-btn layui-btn-danger">
                                    <i class="iconfont icon-delete"></i>删除
                                </button>
                            </div>
                        </div>
                        <!--视频-->
                        <div class="layui-tab-item mass-wrap" id="item_video">
                            <div class="mass-chose">
                                <a class="mass" href="javascript:void(0);" data-chose="video">
                                    <i class="iconfont icon-doc"></i>选择视频
                                </a>
                                <a class="mass" href="/views/index.html#/wx/material/video/video">
                                    <i class="iconfont icon-doc"></i>新建视频
                                </a>
                            </div>
                            <div class="mass-show" style="display: none;">
                                <div class="icon-show-wrap">
                                    <i class="iconfont icon-fileaudio icon-show-block"></i>
                                    <p></p>
                                </div>
                                <button class="layui-btn layui-btn-danger">
                                    <i class="iconfont icon-delete"></i>删除
                                </button>
                            </div>
                        </div>
                        <!-- 文本 -->
                        <div class="layui-tab-item mass-wrap layui-form-text" id="item_text">
                            <div class="layui-input-block" style="margin-left: 0;">
                    <textarea style="height: 200px;" placeholder="请输入内容" class="layui-textarea"
                              id="text-area"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-btn-container">
        <button id="btn_save" class="layui-btn" style="margin-top: 20px;margin-left: 200px;width: 300px;">保存</button>
        <button id="btn_canl" class="layui-btn" style="margin-top: 20px;margin-left: 200px;width: 300px;">返回</button>
    </div>

</div>
<script src="/js/plugin/jquery-tagsinput/jquery.tagsinput.js"></script>
<script>
    layui.use(['layer', 'form', 'laydate', 'element', 'table'], function () {

        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;
        var laydate = layui.laydate;
        var element = layui.element;
		
        var massType = 'news';//默认是图文类型
        element.render('tab');
        var updateId = getHashParam().id;
        var kws=[];
		console.log(updateId);
        !updateId && $('#keywords').tagsInput({
            width: 'auto',
            height: "33",
            defaultText: "输入回车添加",
            minChars : 1, //每个标签的小最字符
            maxChars : 10, //每个标签的最大字符，如果不设置或者为0，就是无限大
            onAddTag: function (value) {
            	var keywords=$("#keywords").val();
            	var words=keywords.split(",");
            	//关键字数量不得超过5个
            	if(words.length>5){
            		layer.msg("关键字数量最多5个！");
                    $('#keywords').removeTag(value);
                    return false;
            	}
                $.ajax({
                    url: '/wxcms/replykeyword/check',
                    data: {key: value},
                    success: function (result) {
                        if(result.data==true){
                            layer.msg("关键字重复！");
                            $('#keywords').removeTag(value);
                        }
                    }
                })
            }
        });

        // 查看修改数据初始化
        updateId && $.ajax({
            url: '/wxcms/replykey/info',
            data: {id: updateId},
            success: function (result) {
                if (result.success && result.data) {
                	kws=[];//清零关键字缓存
                    updateId = result.data.id;
                    massType=result.data.msgType;
                    $("#keywordName").val(result.data.name);
                    //获取关键字集合
                    if(result.data.keyWords){
                    	var keyWords = result.data.keyWords;
                    	var keyword = "";
                    	
                    	$.each(keyWords, function (i, v) {
                    		keyword+=v.key;
                    		kws.push(v.key);
                            if (i < keyWords.length-1) {
                            	keyword+=",";
                            }
                        });
                    	$("#keywords").val(keyword);
//                     	$('#keywords').importTags(keyword);
                    }
//                     $('#keywords').val(result.data.name);
                    $('#keywords').tagsInput({
                        width: 'auto',
                        height: "33",
                        defaultText: "输入回车添加",
                        minChars : 1, //每个标签的小最字符-一个字
                        maxChars : 10, //每个标签的最大字符，如果不设置或者为0，就是无限大-10个字
                        onAddTag: function (value) {
                        	var keywords=$("#keywords").val();
                        	var words=keywords.split(",");
                        	//关键字数量不得超过5个
                        	if(words.length>5){
                        		layer.msg("关键字数量最多5个！");
                                $('#keywords').removeTag(value);
                                return false;
                        	}
                        	//判断初始化的关键字结合中是否存在
//                         	$.inArray(value, kws);//不存在返回-1
                        	if($.inArray(value, kws)!=-1){
                        		return false;
                        	}
                            $.ajax({
                                url: '/wxcms/replykeyword/check',
                                data: {key: value},
                                success: function (result) {
                                    if(result.data==true){
                                        layer.msg("关键字重复！");
                                        $('#keywords').removeTag(value);
                                    }
                                }
                            })
                        }
                    });
                    switch (result.data.msgType) {
                        case "news" :
                            result.data.data && smartAui.renderHtml({
                                targetId: $("#item_tuwen .media-list"),
                                template: "/views/wx/reply/template/news.html",
                                htmlData: {
                                    data: result.data.data
                                },
                                callBack: function () {
                                    $("#item_tuwen").attr("data-id", result.data.data.id);
                                    $("#item_tuwen").attr("data-mediaId", result.data.data.mediaId);
                                    $("#item_tuwen .mass-chose").hide()
                                        .siblings().show();
                                }
                            });
                            break;
                        case "image" :
                            smartAui.renderHtml({
                                targetId: $("#item_image .wxmp-list-image"),
                                template: "/views/wx/reply/template/image-item.html",
                                htmlData: {
                                    data: result.data.data
                                },
                                callBack: function () {
                                    $("#item_image").attr("data-id", result.data.data.id);
                                    $("#item_image").attr("data-mediaId", result.data.data.mediaId);
                                    $("#item_image .mass-chose").hide()
                                        .siblings().show();
                                    $(".layui-tab-title li:nth-child(2)")
                                        .addClass("layui-this")
                                        .siblings(".layui-this")
                                        .removeClass("layui-this");
                                    $("#mass_content .layui-tab-item:nth-child(2)")
                                        .addClass("layui-show")
                                        .siblings(".layui-show")
                                        .removeClass("layui-show");
                                }
                            });
                            break;
                        case "voice" :
                            $("#item_audio").attr("data-id", result.data.data.id);
                            $("#item_audio").attr("data-mediaId",result.data.data.mediaId)
                                .find(".icon-show-wrap p").text(result.data.data.title);
                            $("#item_audio .mass-chose").hide()
                                .siblings().show();
                            $(".layui-tab-title li:nth-child(3)")
                                .addClass("layui-this")
                                .siblings(".layui-this")
                                .removeClass("layui-this");
                            $("#mass_content .layui-tab-item:nth-child(3)")
                                .addClass("layui-show")
                                .siblings(".layui-show")
                                .removeClass("layui-show");
                            break;
                        case "video" :
                            $("#item_video ").attr("data-id", result.data.data.id);
                            $("#item_video ").attr("data-mediaId", result.data.data.mediaId)
                                .find(".icon-show-wrap p").text(result.data.data.title);
                            $("#item_video .mass-chose").hide()
                                .siblings().show();
                            $(".layui-tab-title li:nth-child(4)")
                                .addClass("layui-this")
                                .siblings(".layui-this")
                                .removeClass("layui-this");
                            $("#mass_content .layui-tab-item:nth-child(4)")
                                .addClass("layui-show")
                                .siblings(".layui-show")
                                .removeClass("layui-show");
                            break;
                        case "text" :
                            $("#text-area").text(result.data.content);
                            $(".layui-tab-title li:nth-child(5)")
                                .addClass("layui-this")
                                .siblings(".layui-this")
                                .removeClass("layui-this");
                            $("#mass_content .layui-tab-item:nth-child(5)")
                                .addClass("layui-show")
                                .siblings(".layui-show")
                                .removeClass("layui-show");
                            break;
                    }
                }
            }
        });

        // 开启选择
        $("#mass_content").on("click", "a[data-chose]", function () {
            var TEMP = {
                single: "/views/wx/reply/template/single.html",
                multiple: "/views/wx/reply/template/multiple.html",
                image: "/views/wx/reply/template/image.html",
                audio: "/views/wx/reply/template/audio.html",
                video: "/views/wx/reply/template/video.html",
            };
            var type = $(this).attr("data-chose");
            if (type == "single") {
                smartAui.dialog({
                    title: '选择',
                    template: TEMP['single'],
                    width: 1100,
                    height: 600,
                    yes: function () {
                        var $item = $(".sm-pop li.active");
                        if ($item.length == 0) {
                            layer.msg("请选择");
                            return;
                        }
                        else {
                            $item.removeClass("active");
                            $("#item_tuwen").attr("data-id", $item.attr("data-id"));
                          //选取mediaid
                            $("#item_tuwen").attr("data-mediaId", $item.attr("data-mediaId"));
                            $("#item_tuwen .mass-chose").hide()
                                .siblings().show();
                            $("#item_tuwen .media-list").html($item[0].outerHTML);
                            layer.closeAll();
                        }
                    }
                });
                return;
            }
            if (type == "multiple") {
                smartAui.dialog({
                    title: '选择',
                    template: TEMP['multiple'],
                    width: 1100,
                    height: 600,
                    yes: function () {
                        var $item = $(".sm-pop li.active");
                        if ($item.length == 0) {
                            layer.msg("请选择");
                            return;
                        }
                        else {
                            $item.removeClass("active");
                            $("#item_tuwen").attr("data-id", $item.attr("data-id"));
                            $("#item_tuwen").attr("data-mediaId", $item.attr("data-mediaId"));
                            $("#item_tuwen .mass-chose").hide()
                                .siblings().show();
                            $("#item_tuwen .media-list").html($item[0].outerHTML);
                            layer.closeAll();
                        }
                    }
                });
                return;
            }
            if (type == "image") {
                smartAui.dialog({
                    title: '选择',
                    template: TEMP['image'],
                    width: 1100,
                    height: 600,
                    yes: function () {
                        var $item = $(".sm-pop li.active");
                        if ($item.length == 0) {
                            layer.msg("请选择");
                            return;
                        }
                        $item.removeClass("active");
                        $("#item_image").attr("data-id", $item.attr("data-id"));
                        $("#item_image").attr("data-mediaId", $item.attr("data-mediaId"));
                        $("#item_image .mass-chose").hide()
                            .siblings().show();
                        $("#item_image .wxmp-list-image").html($item[0].outerHTML);
                        layer.closeAll();
                    }
                });
                return;
            }
            if (type == "voice") {
                smartAui.dialog({
                    title: '选择',
                    template: TEMP['audio'],
                    width: 1100,
                    height: 600,
                    yes: function () {
                        var data = table.checkStatus('list_table').data;//已选中数据
                        if (data.length != 1) {
                            layer.msg("请选择一条");
                            return;
                        }
                        data = data[0];
                        $("#item_audio").attr("data-id", data.id)
                        .attr("data-mediaId", data.mediaId)
                            .find(".icon-show-wrap p").text(data.title);
                        $("#item_audio .mass-chose").hide()
                            .siblings().show();
                        layer.closeAll();
                    }
                });
                return;
            }
            if (type == "video") {
                smartAui.dialog({
                    title: '选择',
                    template: TEMP['video'],
                    width: 1100,
                    height: 600,
                    yes: function () {
                        var data = table.checkStatus('list_table').data;//已选中数据
                        if (data.length != 1) {
                            layer.msg("请选择一条");
                            return;
                        }
                        data = data[0];
                        $("#item_video ").attr("data-id", data.id)
                        .attr("data-mediaId", data.mediaId)
                            .find(".icon-show-wrap p").text(data.title);
                        $("#item_video .mass-chose").hide()
                            .siblings().show();
                        layer.closeAll();
                    }
                });
                return;
            }
        })
        // 删除
            .on("click", ".layui-btn-danger", function () {
                $(this).parents(".mass-show").hide().siblings().show().parent().removeAttr("data-id");
            });

        // tab 切换重置
        element.on('tab(mass)', function () {
            massType = $(this).attr('data-type');//设置被选择的消息类型
            console.log(massType);
            $(".mass-chose").show().removeAttr().siblings().hide();
            $(".layui-tab-item").removeAttr("data-id");
        });
		//返回
		$("#btn_canl").click(function () {
			smartAui.confirm("确认要返回？", function () {
				jumpByHash("/wx/reply/keywords/keywords");
			});
		});
        // 提交
        $("#btn_save").click(function () {
            var $active = $(".layui-tab-item.layui-show");
            // 选中资源id
            var id = $active.attr("data-mediaId");
            console.log(id);
            if (massType != 'text') {
                if (!id) {
                    layer.msg("请选择素材！");
                    return;
                }
            }
            var name = $("#keywordName").val();
            console.log(name);
            if (!name) {
                layer.msg("请输入规则名！");
                return;
            }
            var keywords = $("#keywords").val();
            console.log(keywords);
            if (!keywords) {
                layer.msg("请输入关键字！");
                return;
            }
            var keys=keywords.split(",");
            var content = $("#text-area").val();
            if (massType == 'text' && !content) {
                layer.msg("填写文本！");
                return;
            } 
// 			return false;
            smartAui.loading();
            var url, data;
            data = {
            		id : updateId,
                	name :name,
                	msgType: massType,
                	mediaId: id,
                	content : content,
                	keys : keys
                };
            
            // 存在即为更新
            if (updateId) {
                url = "/wxcms/replykey/update";
                
            } else {
                url = "/wxcms/replykey/save"
            }
            $.ajax({
                url: url,
                type: 'POST',
                data: data,
                dataType: 'json',
                success: function (result) {
                    layer.closeAll('loading');
                    if (result.success) {
                        layer.msg("保存成功！");
                        setTimeout(function () {
                            jumpByHash("/wx/reply/keywords/keywords");
                        }, 1000);
                    } else {
                        layer.msg(result.msg || "操作失败");
                    }
                }
            })

        });
    })
    ;
</script>
